<script setup lang="ts">
import {
  ChatDotRound,
  Bell,
  User,
  CircleCheck,
  Timer,
  TrendCharts,
  Star,
  DataAnalysis
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useCustomerServiceStore } from "@/store/modules/customerService";

defineOptions({
  name: "CustomerServiceDashboard"
});

const store = useCustomerServiceStore();

// 统计数据
const stats = ref({
  totalRooms: 0,
  newRequests: 0,
  myRooms: 0,
  resolvedToday: 0,
  avgResponseTime: "0分钟",
  satisfactionRate: "0%"
});

onMounted(() => {
  loadDashboardData();
});

const loadDashboardData = () => {
  stats.value = {
    totalRooms: store.rooms.length,
    newRequests: store.newRequestCount,
    myRooms: store.myRoomCount,
    resolvedToday: store.resolvedRooms.length,
    avgResponseTime: "2.5分钟",
    satisfactionRate: "98.5%"
  };
};
</script>

<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>方舟客服数据面板</h1>
      <p class="subtitle">实时监控客服工作台数据</p>
    </div>

    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon" style="background: #409eff">
          <el-icon :size="32"><ChatDotRound /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.totalRooms }}</div>
          <div class="stat-label">总会话数</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #f56c6c">
          <el-icon :size="32"><Bell /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.newRequests }}</div>
          <div class="stat-label">新请求</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #67c23a">
          <el-icon :size="32"><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.myRooms }}</div>
          <div class="stat-label">我的会话</div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon" style="background: #e6a23c">
          <el-icon :size="32"><CircleCheck /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stats.resolvedToday }}</div>
          <div class="stat-label">今日已解决</div>
        </div>
      </div>
    </div>

    <div class="metrics-grid">
      <el-card class="metric-card">
        <template #header>
          <div class="card-header">
            <span>平均响应时间</span>
            <el-icon><Timer /></el-icon>
          </div>
        </template>
        <div class="metric-value">{{ stats.avgResponseTime }}</div>
        <div class="metric-trend positive">
          <el-icon><TrendCharts /></el-icon>
          <span>较昨日提升 15%</span>
        </div>
      </el-card>

      <el-card class="metric-card">
        <template #header>
          <div class="card-header">
            <span>客户满意度</span>
            <el-icon><Star /></el-icon>
          </div>
        </template>
        <div class="metric-value">{{ stats.satisfactionRate }}</div>
        <div class="metric-trend positive">
          <el-icon><TrendCharts /></el-icon>
          <span>保持稳定</span>
        </div>
      </el-card>
    </div>

    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span>会话趋势</span>
          <el-button text>查看详情</el-button>
        </div>
      </template>
      <div class="chart-placeholder">
        <el-empty description="图表功能开发中...">
          <el-icon :size="64" color="#909399"><DataAnalysis /></el-icon>
        </el-empty>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.dashboard-container {
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  background: #f5f7fa;

  .dashboard-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }

    .subtitle {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;

    .stat-card {
      display: flex;
      gap: 16px;
      align-items: center;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 4%);
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 4px 16px 0 rgb(0 0 0 / 8%);
        transform: translateY(-2px);
      }

      .stat-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        color: white;
        border-radius: 12px;
      }

      .stat-content {
        flex: 1;

        .stat-value {
          font-size: 28px;
          font-weight: 600;
          line-height: 1.2;
          color: #303133;
        }

        .stat-label {
          margin-top: 4px;
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;

    .metric-card {
      .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
      }

      .metric-value {
        margin: 16px 0;
        font-size: 36px;
        font-weight: 600;
        color: #409eff;
      }

      .metric-trend {
        display: flex;
        gap: 4px;
        align-items: center;
        font-size: 14px;

        &.positive {
          color: #67c23a;
        }

        &.negative {
          color: #f56c6c;
        }
      }
    }
  }

  .chart-card {
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 600;
    }

    .chart-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
    }
  }
}
</style>
